<template>
	<view>
		<view class="contents">
			<view class="list ">
				<view class="lists p30">
					<view class="shop_title ">
						<view @tap="Go('../users/users?id='+productCreator.id)">
							<image class="logo vm" :src="productCreator.eperAccount?productCreator.eperAccount.eperAvatarImg:''" mode=""></image>
							<p class="one" @tap.stop>{{productCreator.eperAccount?productCreator.eperAccount.eperUsername:''}}</p>
						</view>
					</view>
					<view class="main">
						<view @tap="Go('../GoodsDetails/GoodsDetails?id='+item.productInfo.id)" class="box " v-for="(item,index) in orderItems" :key="index">
							<image  class="goodsImg" :src="item.image" mode="aspectFill"></image>
							<view class="txt">
								<p class="p1  one"> {{item.name}}</p>
								<p class="p2  one"> {{item.productInfo.specifications}} </p>
								<view class="p3  one">
									<p>¥ <span>{{item.price}}</span>
										<span class="nums" >
											× {{item.quantity}}
										</span></p>

								</view>
							</view>
						</view>
					</view>
					<view class="sumMoney">
						小计: <span>￥</span>{{order.price}}
					</view>
				</view>

			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			order: {
				type: Object,
				default: function() {
					return {}
				}
			},
			orderItems: {
				type: Array,
				default: function() {
					return []
				}
			},
			productCreator: {
				type: Object,
				default: function() {
					return {}
				}
			}
		},
		mounted() {
			setTimeout(() => {
				console.log(this.orderItems);
			}, 1000)
		},
		data() {
			return {

			};
		},
		methods: {
			Go(url) {
				this.$navigateTo(url)
			},
		}
	}
</script>

<style lang="less" scoped>
	.contents {
		margin-top: 24rpx;
	}

	.lists {
		border-radius: 20rpx;
		background: white;
		margin-bottom: 20rpx;
		// padding-top: 10rpx;
		box-shadow: 0px 0px 20rpx 0px rgba(0, 0, 0, 0.03);

		.shop_title {
			height: 104rpx;
			line-height: 104rpx;
			position: relative;
			font-size: 32rpx;
			font-family: PingFang SC;
			font-weight: bold;
			color: rgba(26, 26, 26, 1);

			view {
				border-bottom: 1px solid #EEEEEE;
				display: flex;
			}

			p {
				// display: inline-block;
				max-width: 500rpx;
			}

			.logo {
				width: 50rpx;
				height: 50rpx;
				border-radius: 50%;
				margin-right: 20rpx;
				margin-top: 28rpx;
			}
		}

		.main {
			margin-top: 10rpx;
			padding-top: 24rpx;
			padding-bottom: 20rpx;
			color: #333333;
		}

		.box {
			display: flex;
			margin-bottom: 30rpx;
			position: relative;

		}

		.goodsImg {
			width: 150rpx !important;
			height: 150rpx !important;
			border-radius: 8rpx;
		}


		.actBox {
			padding-left: 84rpx;
		}

		.title {
			padding-left: 30rpx;
			padding-right: 30rpx;
		}

		.actTitle {
			padding-left: 84rpx;
		}

		.txt {
			flex: 1;
			width: 200rpx;
		}

		.p1 {
			margin-left: 20rpx;
			width: 480rpx;
			font-size: 32rpx;
			color: rgba(39, 39, 39, 1);
		}

		.p2 {
			width: 480rpx;
			font-size: 28rpx;
			margin-left: 20rpx;
			color: #666666;
		}

		.p3 {
			margin-left: 20rpx;
			margin-top: 20rpx;
			color: #FF3F3E;
			overflow: hidden;

			p {
				// float: left;
				color: rgba(246, 82, 16, 1);

				span {
					font-size: 32rpx;
					// font-weight:bold; 
				}

			}

			.nums {
				float: right;
				font-size: 28rpx;
				font-family: PingFang SC;
				font-weight: 400;
				color: rgba(153, 153, 153, 1);
				padding-top: 10rpx;
			}
		}

		.sumMoney {
			border-top: 1px solid #EEEEEE;
			height: 106rpx;
			line-height: 106rpx;
			font-size: 32rpx;
			font-family: PingFang SC;
			font-weight: bold;
			color: rgba(26, 26, 26, 1);
			text-align: right;

			span {
				font-size: 24rpx;
				margin-left: 12rpx;
			}
		}

	}
</style>
